<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import nineOneAuthorizationList from './nine-one/AuthorizationList.vue'
import xingChiAuthorizationList from './xing-chi/AuthorizationList.vue'

const route = useRoute()

const nineOneAuthorizationListRef = ref()
const xingChiAuthorizationListRef = ref()

const activeKey = ref<string>('1')

const changeTabs = () => {
  nineOneAuthorizationListRef.value.getList()
  xingChiAuthorizationListRef.value.getList()
}
</script>

<template>
  <page-container :title="route.meta.title">
    <a-card style="overflow-x: scroll">
      <a-tabs v-model:activeKey="activeKey" size="small" @tabClick="changeTabs">
        <a-tab-pane key="1" tab="91卡券" force-render>
          <nineOneAuthorizationList ref="nineOneAuthorizationListRef"></nineOneAuthorizationList>
        </a-tab-pane>

        <a-tab-pane key="2" tab="星驰卡券" force-render>
          <xingChiAuthorizationList ref="xingChiAuthorizationListRef"></xingChiAuthorizationList>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-container>
</template>
